<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联系我们</title>
    <script src="../../static/js/axios-0.18.0.js"></script>
    <script src="../../static/plugins/echarts/echarts.js"></script>
    <script src="../../static/js/vue.js"></script>
    <link href="../../static/css/style.css" rel="stylesheet">
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.js"></script>
    <style>
        .el-header {
            background-color: #ffffff;
            text-align: center;
            line-height: 80px;
            padding-top: 10px;
        }

        a:link {
            text-decoration: none;
            color: #53a100;
        }

        a:visited {
            text-decoration: none;
            color: #4cae4c;
        }

        a:hover {
            text-decoration: none;
            color: #82fa1b;
        }

        a:active {
            text-decoration: none;
            color: #015306;
        }

        a {
            font-size: 20px;
        }

        .imputStyle {
            padding-top: 9px;
            text-align: center;
            height: 4rem;
            border: 1px solid #4cae4c;
            line-height: 48px;
            border-radius: 20px;
            outline: none;
            font-size: 15px;
        }

        .ps-badge {
            display: inline-block;
            position: absolute;
            margin-top: 0;
            margin-left: 0;
            width: 80px;
            height: 35px;
            z-index: 10;
            background-color: #e36401;
        }

        .ps-badge > span {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            font-family: "Montserrat", sans-serif;
            font-size: 16px;
            font-weight: 500;
            color: #efefef;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-main {
            color: #333;
            text-align: center;
            height: auto;
            margin: 0px;
            padding: 0px;
            width: 100%;
        }
    </style>
</head>
<body style="width: 100%;margin: 0px;padding: 0px;">
<div id="app">
    <div class="el-header">
        <el-col :span="8">
            <div class="grid-content bg-purple" style="float: left">
                <a href="/"><img height="70px" width="200px" src="../../static/pic/logo.jpg"/></a>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="grid-content bg-purple">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1"><a href="/" style="color: #4cae4c">首页</a>
                    </el-menu-item>
                    <el-menu-item index="2"><a href="/commolist/commolist" style="color: #4cae4c">二手商品</a>
                    </el-menu-item>
                    <el-menu-item index="3"><a href="/commolist/news" style="color: #4cae4c">网站公告</a>
                    </el-menu-item>
                    <el-menu-item index="4"><a href="/commolist/feedback" style="color: #4cae4c">联系我们</a>
                    </el-menu-item>
                </el-menu>
            </div>
        </el-col>
        <el-col :span="4">
            <div style="">
                <input @keyup.enter="findall" class="imputStyle" v-model="inputString" placeholder="请输入..."/>
            </div>
        </el-col>
        <el-col :span="5">
            <div class="grid-content bg-purple-light right" style="float: right" v-if="islogin">
                <el-menu class="el-menu-demo" mode="horizontal">
                    <el-submenu>
                        <template slot="title">
                            <el-avatar
                                    :src="userimage"></el-avatar>
                            {{username}}
                        </template>
                        <a href="/user/centre" target="_blank">
                            <el-menu-item index="2-1">个人中心</el-menu-item>
                        </a>
                        <el-menu-item index="2-3" @click="quit">退出</el-menu-item>
                    </el-submenu>
                </el-menu>

            </div>
            <div class="el-menu-demo" style="float: right; text-align: center" v-else>
                <a href="/login">登陆&注册</a>
            </div>
        </el-col>
    </div>
    <div style="height: 10px;background-color: #ffffff"></div>
    <div style="width: 100%;height: 30px;margin-top: 80px">
        <div style="width: 100%;height: 50px;">
            <el-divider></el-divider>
        </div>
    </div>
    <div id="three" style="width: 100%;height: auto">
        <!--反馈-->
        <template>
            <div id="gonggaotitle" style="width: 90%; padding-top: 20px;">
                <span style="font-size: 30px;color: #4cae4c;margin-left: 180px">网站反馈</span>
            </div>
            <div style="width: 80%; margin: 0 auto; padding-top: 20px">

                <el-form ref="feeddata" :model="feeddata" :rules="rules" label-position="right" label-width="100px" index="wei">
                    <el-row>
                        <el-form-item label="反馈简介" prop="feedname">
                            <el-input
                                    type="text"
                                    placeholder="请输入..."
                                    v-model="feeddata.feedname"
                                    maxlength="20"
                                    show-word-limit
                            >
                            </el-input>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item label="反馈详情" prop="feeddesc">
                            <el-input
                                    type="textarea"
                                    placeholder="请输入内容,反馈意见......."
                                    :autosize="{minRows:5,maxRows:10}"
                                    v-model="feeddata.feeddesc"
                                    maxlength="50"
                                    show-word-limit
                            >
                            </el-input>
                        </el-form-item>
                    </el-row>

                    <el-row>
                        <el-button type="success" @click="submit">提交</el-button>
                    </el-row>
                </el-form>
            </div>
        </template>
    </div>

    <div style="height: 30px;background-color: #ffffff"></div>
    <div style="height: 100px;background-color: #ffffff"></div>
    <!--最底部-->
    <div style="width: 100%;height: auto;background-color: #222222;">
        <div class="ps-footer__content">
            <div class="ps-container">
                <div class="row">
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--info">
                            <header><a class="ps-logo" href="/"><img src="../../static/pic/logo.jpg"
                                                                     alt=""></a>
                                <h3 class="ps-widget__title">Address Office 1</h3>
                            </header>
                            <footer>
                                <p><strong>460 West 34th Street, 15th floor, New York</strong></p>
                                <p>Email: <a href='mailto:support@store.com'>nanyangligong@nyist.com</a></p>
                                <p>Phone: +323 32434 5334</p>
                                <p>Fax: ++323 32434 5333</p>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--info second">
                            <header>
                                <h3 class="ps-widget__title">Address Office 2</h3>
                            </header>
                            <footer>
                                <p><strong>PO Box 16122 Collins Victoria 3000 Australia</strong></p>
                                <p>Email: <a href='mailto:support@store.com'>nanyangligong@nyist.com</a></p>
                                <p>Phone: +323 32434 5334</p>
                                <p>Fax: ++323 32434 5333</p>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Find Our store</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--link">
                                    <li><a href="#">Coupon Code</a></li>
                                    <li><a href="#">SignUp For Email</a></li>
                                    <li><a href="#">Site Feedback</a></li>
                                    <li><a href="#">Careers</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Get Help</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--line">
                                    <li><a href="#">Order Status</a></li>
                                    <li><a href="#">Shipping and Delivery</a></li>
                                    <li><a href="#">Returns</a></li>
                                    <li><a href="#">Payment Options</a></li>
                                    <li><a href="#">Contact Us</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ">
                        <aside class="ps-widget--footer ps-widget--link">
                            <header>
                                <h3 class="ps-widget__title">Products</h3>
                            </header>
                            <footer>
                                <ul class="ps-list--line">
                                    <li><a href="#">Shoes</a></li>
                                    <li><a href="#">Clothing</a></li>
                                    <li><a href="#">Accessries</a></li>
                                    <li><a href="#">Football Boots</a></li>
                                </ul>
                            </footer>
                        </aside>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--回到最顶部-->
    <el-backtop>
        <div style="{
                    height: 100%;
                    width: 100%;
                    background-color: #f2f5f6;
                    box-shadow: 0 0 6px rgba(0,0,0, .12);
                    text-align: center;
                    line-height: 40px;
                    color: #4cae4c;}">
            <i class="el-icon-caret-top"></i>
            UP
        </div>
    </el-backtop>
</div>

</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            islogin: false,
            feeddata:{},
            fullscreenLoading: false,
            username: "",
            inputString:'',
            userimage: "",
            rules: {
                feedname: [{required: true, message: '请填写反馈简介', trigger: 'blur'},
                    {min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur'}],
                feeddesc: [{required: true, message: '请填写反馈详情', trigger: 'blur'}],
            }
        },
        created() {
            //判断是否登陆
            this.getname();
        },
        methods: {
            getname() {
                //获取用户信息
                axios.post("/user/getusermess").then((res) => {
                    this.islogin = res.data.flag;
                    if (this.islogin) {
                        this.username = res.data.data.username;
                        this.userimage = res.data.data.uimage;
                    }
                })
            },
            findall() {
                //搜索
                //跳转页面
                window.open("/commodity/lookfor?inputString=" + this.inputString);
            },
            //回到最顶端
            goPost () {
                let distance = document.documentElement.scrollTop || document.body.scrollTop; //获得当前高度
                let step = distance / 30; //每步的距离
                (function jump() {
                    if (distance > 0) {
                        distance -= step;
                        window.scrollTo(0, distance);
                        setTimeout(jump, 10);
                    }
                })();
            },
            //退出
            quit() {
                axios.post("/user/quit").then((res) => {
                    this.$message.success(res.data.message);
                    //跳转页面
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                        location.href = "/";
                    }, 2000);
                }).catch(() => {
                    this.$message.error("退出失败");
                })
            },
            //提交反馈
            submit(){
                //判断是否登陆
                if(this.islogin){
                    //以登陆
                    //表单验证
                    this.$refs['feeddata'].validate((valid)=>{
                        if(valid){
                            axios.post("/commodity/addfeedback",this.feeddata).then((res)=>{
                                if(res.data.flag){
                                    this.$message.success(res.data.message);
                                    this.clearform();
                                }else{
                                    this.$message.error(res.data.message);
                                }
                            }).catch(()=>{
                                this.$message.error("反馈失败,请重试");
                            })
                        }
                    })
                }else{
                    //未登录
                    this.$message.warning("请先登录");
                }
            },
            //清空表单
            clearform(){
                this.feeddata = {};
            }
        },

    })
</script>
</html>